<template>
  <div class="tab">
    <tab-search
        :search-value="searchValue"
        @update:tab-item="updateTabItem"
    ></tab-search>
    <tab-nav 
        :nav-data="navData"
        :tab-index="tabIndex"
        @change-item="changeItem"
    ></tab-nav>
    <tab-page
        :page-data="pageData"
    ></tab-page>
  </div>
</template>

<script>
import TabSearch from './TabSearch/index.vue'
import TabNav from './TabNav/index.vue'
import TabPage from './TabPage/index.vue'

export default {
    name: 'tab',
    components: {
        TabSearch,
        TabNav,
        TabPage
    },
    props: ['tabData'],
    data() {
        return {
            tabIndex: this.tabData.intialIndex,
            searchValue: this.tabData.searchValue || this.tabData.data[this.tabData.intialIndex].title
        }
    },
    computed: {
        // 分流 tabData
        navData() {
            return this.tabData.data.map((item) => {
                    return {
                        id: item.id,
                        itemTitle: item.itemTitle
                    }
            })
        },
        pageData() {
            const _self = this;
            return this.tabData.data.find((item, index) =>
                (index === this.tabIndex)
            ,_self);
        }
    },
    methods: {
        changeItem(index) {
            this.tabIndex = index;
        },
        updateTabItem(newValue) {
            this.tabData.data.some((item, index) => {
                if (item.title.includes(newValue) || item.content.includes(newValue)) {
                    this.tabIndex = index;
                    return true;
                }
            });
        }
    },
    mounted() {
        if (this.tabData.searchValue) {
            this.updateTabItem(this.tabData.searchValue);
        }
    }
}
</script>

<style>
.tab {
    width: 400px;
    height: 500px;
    border: 1px solid #454545;
}
</style>
